<template>
  <h2>添加入库管理</h2>

  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="from"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="货物名称" prop="sMCargoName">
      <el-input v-model="from.sMCargoName" />
    </el-form-item>
    <el-form-item label="支付方式" prop="patternOfPayment">
      <el-radio-group v-model="from.patternOfPayment">
        <el-radio value="微信支付" size="large">微信支付</el-radio>
        <el-radio value="支付宝支付" size="large">支付宝支付</el-radio>
        <el-radio value="银联支付" size="large">银联支付</el-radio>
        <el-radio value="企业转账" size="large">企业转账</el-radio>
        <el-radio value="线下支付" size="large">线下支付</el-radio>
        <el-radio value="其他" size="large">其他</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="类型" prop="sMTypeID">
      <el-select
        v-model="from.sMTypeID"
        clearable
        placeholder="Select"
        style="width: 240px"
      >
        <el-option :value="0" label="请选择" />
        <el-option
          v-for="item in TypeInfo"
          :key="item.typeid"
          :label="item.typeName"
          :value="item.typeid"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="材质" prop="sMMateriaLquality">
      <el-select
        v-model="from.sMMateriaLquality"
        clearable
        placeholder="请选择"
        style="width: 240px"
      >
        <el-option :value="0" label="请选择" />
        <el-option
          v-for="item in MateriaLquality"
          :key="item.mmteriaLqualityID"
          :label="item.materiaLqualityName"
          :value="item.mmteriaLqualityID"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="规格" prop="sMGaugeLattice">
      <el-input v-model="from.sMGaugeLattice" />
    </el-form-item>
    <el-form-item label="产地" prop="sMProvinceID">
      <el-select
        v-model="from.sMNationID"
        clearable
        placeholder="国家"
        style="width: 240px"
        @change="Provincelist()"
      >
        <el-option :value="0" label="请选择国家" />
        <el-option
          v-for="item in Nation"
          :key="item.nationID"
          :label="item.nationName"
          :value="item.nationID"
        />
      </el-select>
      <el-select
        v-model="from.sMProvinceID"
        clearable
        placeholder="省"
        style="width: 240px"
      >
        <el-option :value="0" label="请选择省" />
        <el-option
          v-for="item in Provincel"
          :key="item.provinceID"
          :label="item.provinceName"
          :value="item.provinceID"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="数量" prop="sMQuantity">
      <el-input-number v-model="from.sMQuantity" :min="1" @change="handleChange" />
    </el-form-item>
    <el-form-item label="单价" prop="sMSingleValence">
      <el-input v-model="from.sMSingleValence" placeholder="请输入单价" />
    </el-form-item>
    <el-form-item label="备注" prop="sMQuantity">
      <el-input v-model="from.sPReserveNote" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交审核 </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
import { useRouter } from "vue-router";
const router = useRouter();

//数据信息
const from = reactive({
  sMCargoName: "",
  patternOfPayment: "",
  sMTypeID: 0,
  sMMateriaLquality: 0,
  sMGaugeLattice: "",
  sMNationID: 0,
  sMProvinceID: 0,
  sMSingleValence: 0,
  sMQuantity: 0,
  sPReserveNote: "",
});

//生命函数钩
onMounted(() => {
  //显示类  型
  TypeInfolist();
  //显示材 质
  MateriaLqualitylist();
  //显示产 地：国家
  Nationlist();
});
//显示类    型
const TypeInfo = ref([]);
const TypeInfolist = () => {
  from.sMProvinceID = 0;
  axios
    .get("MaterialRead/api/Public/TypeInfolist")
    .then((res) => {
      TypeInfo.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//显示材 质
const MateriaLquality = ref([]);
const MateriaLqualitylist = () => {
  axios
    .get("MaterialRead/api/Public/MateriaLqualitylist")
    .then((res) => {
      MateriaLquality.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//显示产 地：国家
const Nation = ref([]);
const Nationlist = () => {
  axios
    .get("MaterialRead/api/Public/Nationlist")
    .then((res) => {
      Nation.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};
//显示产 地：省
const Provincel = ref([]);
const Provincelist = () => {
  axios
    .get("MaterialRead/api/Public/Provincelist?nationID=" + from.sMNationID)
    .then((res) => {
      Provincel.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//验证
const rules = reactive<FormRules>({
  sMCargoName: [{ required: true, message: "货物名称不能为空", trigger: "blur" }],
  sMQuantity: [{ required: true, message: "数量不能为空", trigger: "blur" }],
  sMSingleValence: [{ required: true, message: "价格不能为空", trigger: "blur" }],
  patternOfPayment: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  sMTypeID: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  sMMateriaLquality: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  sPProvinceID: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  sMNationID: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
//数值
const handleChange = (value: number) => {
  from.sMQuantity = value;
  console.log(value);
};
//提交审核
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(from)
            axios.post("materialwrite/api/StockManagement/AddStockManagement", from).then(res => {
                if (res.data.code > 0) {
                    ElMessage.success("提交成功")
                    router.push("/DePutInStorageList")
                } else {
                    ElMessage.error("提交失败")
                }
            }).catch(err => {
                console.log(err)
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style></style>
